<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id = "js">Java Script</p>
    <div id="list">
        <p id="se">Java SE</p>
        <p id="ee">Java EE</p>
        <p id="me">Java ME</p>
    </div>
</body>
<script>
    let js = document.getElementById("js");
    let list = document.getElementById("list");
    //将js节点插入到list中最后一位
    list.appendChild(js);

    //元素不存在，则创建节点
    let newEle = document.createElement('h1');
    // newEle.id = "newEle";//和下方代码效果一样，通常使用下面的
    newEle.setAttribute("id","newEle");
    newEle.innerText = "Hello，LX";
    //上面三步执行完，相当于手写了html代码 <h1 id = "newEle"> Hello，LX </h1>

    //追加到最后元素
    list.appendChild(newEle);

    //插入到指定元素前面，insertBefore，第一个参数为新的节点，第二个是要往哪个节点前插入的目标节点
    let me = document.getElementById("me");
    list.insertBefore(newEle,me);
</script>
</html>